<template>
  <div>
<!--    主页-->
      <el-container>
        <el-header>
          <span style="color: #eeeeee;float: left">和兴体育馆管理信息系统</span>
          <div style="float: right">
            <el-button plain size="medium" class="menu1" @click="login()">登录</el-button>
            <el-button plain size="medium" class="menu2" @click="registerForm">注册</el-button>
          </div>
        </el-header>
        <el-main><span style="color: white;font-size:50px;margin-left: 200px">和兴体育馆</span></el-main>
        <el-footer>
          <el-tabs type="border-card">
<!--            轮播图-->
            <el-tab-pane label="场地展示">
              <div class="block">
                <el-carousel >
                  <el-carousel-item v-for="item in pictureDate" :key="item.id">
                    <img :src="item.url" alt="图片丢失" :title="item.title"/>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </el-tab-pane>
<!--            公告-->
            <el-tab-pane label="公告">
              <el-table :data="noticeList" style="width: 100%">
                <el-table-column label="公告名称" width="180" prop="noticeName">
                  <template slot-scope="scope">
                    <i class="el-icon-s-comment"></i>
                    <span style="margin-left: 10px">{{ scope.row.noticeName }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="发布时间" width="180" prop="creatTime">
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.creatTime }}</span>
                  </template>
                </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button
                          size="mini"
                          style="background-color: #eeeeee"
                          @click="lookNotice(scope.row.id)">查看</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                    small
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageIndex"
                    :page-sizes="[3, 5, 10]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </el-tab-pane>
<!--            体育锻炼知识-->
            <el-tab-pane label="体育锻炼知识">
              <el-table
                  :data="exerciseList"
                  style="width: 100%">
                <el-table-column label="项目名称" width="180" prop="exercisesName" >
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.exercisesName }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="内容介绍" width="180" prop="exercisesContent" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.exercisesContent }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="具体内容">
                  <template slot-scope="scope">
                        <el-button type="text" @click="dialog = true;lookExercise(scope.row.exercisesId)" circle style="background-color: snow"><i class="el-icon-view"/></el-button>
                        <el-drawer
                            title="体育锻炼知识"
                            style="font-size: 20px"
                            :visible.sync="dialog"
                            direction="ltr"
                            size="600px"
                            custom-class="demo-drawer"
                            ref="drawer"
                        >
                          <div class="demo-drawer__content">
                            <el-form :model="exercisesForm">
                              <el-form-item label="项目名称：" :label-width="formLabelWidth">
                                <el-input readonly v-model="exercisesForm.exercisesName" autocomplete="off"></el-input>
                              </el-form-item>
                              <el-form-item label="项目内容：" :label-width="formLabelWidth" style="height: 135px">
                                <el-input :rows="6" readonly v-model="exercisesForm.exercisesContent" type="textarea" autocomplete="off"></el-input>
                              </el-form-item>
                              <el-form-item label="收获：" :label-width="formLabelWidth" style="height: 135px">
                                <el-input :rows="6" readonly v-model="exercisesForm.exercisesGood" type="textarea" autocomplete="off"></el-input>
                              </el-form-item>
                              <el-form-item label="项目图片：" :label-width="formLabelWidth" prop="photo">
                                <div class="block">
                                  <el-image
                                      style="width: 80%; height: 200px"
                                      :src="exercisesForm.photo"
                                      ></el-image>
                                </div>
                              </el-form-item>
                            </el-form>
                          </div>
                        </el-drawer>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                  small
                  @size-change="handleSizeChangeExercise"
                  @current-change="handleCurrentChangeExercise"
                  :current-page="pageIndexE"
                  :page-sizes="[3, 5, 10]"
                  :page-size="pageSizeE"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalE">
              </el-pagination>
            </el-tab-pane>

          </el-tabs>
          <el-descriptions class="margin-top" title="体育馆信息" direction="vertical" :column="3"  border>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                体育馆名
              </template>
              和兴体育馆
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                联系电话
              </template>
              00852-26697057
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                所在地
              </template>
              香港特别行政区北区-和明里8号
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                备注
              </template>
              <el-tag size="small">体育馆</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-message"></i>
                联系邮箱
              </template>
              1956254830@qq.com
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                负责人
              </template>
              张XX
            </el-descriptions-item>
          </el-descriptions>
        </el-footer>
      </el-container>
    <div>
      <!--  登录-->
        <el-dialog title="用户登录" :visible.sync="dialogVisibleLogin" width="40%">
        <el-card>
        <el-form :model="loginForm" :rules="rules" class="login_from" ref="loginForm">
          <el-form-item prop="workName">
            <el-input prefix-icon="el-icon-s-custom" v-model="loginForm.workName" autofocus></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-key" v-model="loginForm.password" type="password"
                      @keyup.enter.native="login"></el-input>
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
            <el-button type="danger" @click="resetForm('loginForm')">重置</el-button>
          </el-form-item>
        </el-form>
        </el-card>
        </el-dialog>
    </div>

    <div>
      <!--  公告-->
      <el-dialog title="公告内容" :visible.sync="dialogVisibleNotice" width="40%">
        <el-card>
          <el-form :model="noticeAll" :rules="rules" class="noticeAll_from" ref="noticeAllForm">
            <el-form-item  label="公告名称" prop="noticeName">
              <el-input readonly v-model="noticeAll.noticeName"></el-input>
            </el-form-item>
            <el-form-item label="公告日期" prop="creatTime">
              <el-input readonly v-model="noticeAll.creatTime"></el-input>
            </el-form-item>
            <el-form-item label="公告内容" prop="noticeContent">
              <el-input readonly type="textarea"  v-model="noticeAll.noticeContent"></el-input>
            </el-form-item>
          </el-form>
        </el-card>
      </el-dialog>
    </div>
    <div>
  <!-- 注册-->
  <el-dialog title="用户注册" :visible.sync="dialogVisibleRegister" width="40%">
    <!--表单-->
    <el-card>
      <el-form :model="addUserForm" :inline="true" :rules="addrules" size="mini" ref="addUserForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户账号" prop="workName">
          <el-input  v-model="addUserForm.workName"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input v-model="addUserForm.password"></el-input>
        </el-form-item>
        <el-form-item label="用户性别" prop="workSex">
          <el-select v-model="addUserForm.workSex" placeholder="请选择用户性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户身份证" prop="workIdCard">
          <el-input v-model="addUserForm.workIdCard"></el-input>
        </el-form-item>
        <el-form-item label="用户电话" prop="workTel">
          <el-input v-model="addUserForm.workTel"></el-input>
        </el-form-item>
        <div class="btn_opt">
          <el-form-item>
            <el-button type="primary" @click="submitAddForm('addUserForm')">注册</el-button>
            <el-button @click="resetAddForm('addUserForm')">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-card>
  </el-dialog>
  </div>
  </div>
</template>

<script>
export default {
  name: "Admin",
  data() {
    var validateWorkName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        if (value.length < 2 || value.length > 10) {
          callback(new Error('用户名长度是2~10位'));
        }
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (value.length < 3 || value.length > 10) {
          callback(new Error('密码长度是3~10位'));
        }
        callback();
      }
    };
    return {
      dialog: false,
      loading: false,
      exercisesForm: {
        exercisesName: '',
        exercisesContent: '',
        photo:'',
        exercisesGood:'',
      },
      formLabelWidth: '20%',
      timer: null,

      //公告
      noticeList:[],
      noticeName:"",
      creatTime:"",
      pageIndex:1,
      total:10,
      pageSize:3,
      noticeAll:{
        noticeName:"",
        creatTime:"",
        noticeContent: "",
      },
      dialogVisibleNotice:false,

      //锻炼知识
      exerciseList:[],
      exerciseName:"",
      exerciseContent:"",
      exerciseGood:"",
      photo:"",
      pageIndexE:1,
      totalE:10,
      pageSizeE:3,



      dialogVisibleRegister: false,
      dialogVisibleLogin: false,
      addUserForm: {
        workName: '',
        password: '',
        workSex: '',
        workIdCard:'',
        workTel: ''
      },
      loginForm: {
        workName: '',
        password: ''
      },
      rules: {
        workName: [
          {validator: validateWorkName, trigger: 'blur'}
        ],
        password: [
          {validator: validatePass, trigger: 'blur'}
        ]
      },
      addrules: {
        workName: [
          {required: true, message: '请输入用户账号', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'change'}
        ],
        workSex: [
          {required: true, message: '请选择性别', trigger: 'change'}
        ],
        workIdCard: [
          {required: true, message: '请输入用户身份证号', trigger: 'blur'},
          {min: 18, max: 18, message: '长度为 18 个字符', trigger: 'blur'}
        ],
        workTel: [
          {required: true, message: '请输入电话号码', trigger: 'blur'},
          {min: 6, max: 11, message: '长度在 6 到 11 个字符', trigger: 'blur'}
        ],
      },

      //跑马灯路径
      pictureDate: [
        {id: 0, url: require("../assets/main.jpg"),title:"体育馆主页"},
        {id: 1, url: require("../assets/space/lanqiu.jpeg"),title:"篮球馆"},
        {id: 2, url: require("../assets/space/lanqiu3.jpeg"),title:"篮球馆"},
        {id: 3, url: require("../assets/space/yujia1.jpeg"),title:"瑜伽室"},
        {id: 4, url: require("../assets/space/yujia3.jpeg"),title:"瑜伽室"},
        {id: 5, url: require("../assets/space/yumaoqiu1.jpeg"),title:"羽毛球馆"},
        {id: 6, url: require("../assets/space/yumaoqiu2.jpeg"),title:"羽毛球馆"},
        {id: 7, url: require("../assets/space/zuqiu1.jpeg"),title:"足球馆"},
      ],
    };
  },
  methods: {
      //公告分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getNoticeList(this.pageIndex,this.pageSize);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageIndex = val;
        this.getNoticeList(this.pageIndex,this.pageSize);
      },

      //公告内容
      lookNotice(id){
        this.dialogVisibleNotice=true;
        this.$axios.post('/notice-info/lookNotice',"id="+id).then(res=>{
          console.log(id)
          console.log(res)
          var noticeOne = res.data.data;
          this.noticeAll={
            noticeName:noticeOne.noticeName,
            creatTime: noticeOne.creatTime,
            noticeContent: noticeOne.noticeContent
          }
        }).catch(err=>{
          console.log(err)
        })
      },

      //查询公告信息
      getNoticeList(pageIndex,pageSize){
        var params = new URLSearchParams();
        params.append("pageIndex",pageIndex)
        params.append("pageSize",pageSize)
        this.$axios.post('/notice-info/getNoticeList',params).then(res=>{
          console.log(res)
          this.noticeList=res.data.data.list
          this.total=res.data.data.total
        }).catch(err=>{
          console.log(err)
        })
      },

      handleSizeChangeExercise(val) {
        console.log(`每页 ${val} 条`);
        this.pageSizeE = val;
        this.getExerciseList(this.pageIndexE,this.pageSizeE);
      },
      handleCurrentChangeExercise(val) {
        console.log(`当前页: ${val}`);
        this.pageIndexE = val;
        this.getExerciseList(this.pageIndexE,this.pageSizeE);
      },

      //查询锻炼知识
      getExerciseList(pageIndexE,pageSizeE){
        var params = new URLSearchParams();
        params.append("pageIndex",pageIndexE)
        params.append("pageSize",pageSizeE)
        this.$axios.post('/exercises-info/getExerciseList',params).then(res=>{
          console.log("锻炼"+res)
          this.exerciseList=res.data.data.list
          this.totalE=res.data.data.total
        }).catch(err=>{
          console.log(err)
        })
      },

    //查看具体内容锻炼知识
      lookExercise(exercisesId){
        console.log(exercisesId)
        this.$axios.post('/exercises-info/lookExercise',"exercisesId="+exercisesId).then(res=>{
          console.log(res)
          var exercisesOne = res.data.data;
          console.log(exercisesOne.photo)
          this.exercisesForm={
            exercisesName:exercisesOne.exercisesName,
            exercisesContent: exercisesOne.exercisesContent,
            exercisesGood: exercisesOne.exercisesGood,
            photo:exercisesOne.photo,
          }
        }).catch(err=>{
          console.log(err)
        })
      },

      login() {
        this.dialogVisibleLogin=true;
      },
      registerForm() {
        this.dialogVisibleRegister=true;
      },

      //登录
      submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.$axios.post('/user-info/login', 'workName=' + this.loginForm.workName + "&password=" + this.loginForm.password).then(res => {
                console.log(res)
                if (res.data.code == 200) {
                  this.$message.success('登陆成功')
                  this.$store.state.user = res.data.data
                  sessionStorage.setItem('user', JSON.stringify(res.data))
                  this.$router.push("/Home")

                } else {
                  this.$message.error(res.data.msg)
                }
              }).catch(err => {
                console.log(err)
              })
            } else {
              return false;
          }
      });
    },
    //登录重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //注册重置
    resetAddForm(formName) {
      this.$refs[formName].resetFields();
    },

    //注册
    submitAddForm(formName) {
      this.$refs[formName].validate((valid)=>{
        if(valid){
          this.$axios.post("/user-info/addNewUser",this.addUserForm).then(res=>{
            console.log(res)
            if (res.data.code ==200){
              this.$message.success("注册成功")
              console.log(res)

            } else {
              this.$message.error(res.data.msg)
            }
          }).catch(err=>{
            console.log(err)
          })

        }else{
          return false;
        }
      });
    },
  },
  created() {
    this.getNoticeList(this.pageIndex,this.pageSize);

    this.getExerciseList(this.pageIndex,this.pageSize);
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #cb0e0e;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-image: url("../assets/img.png");
  height: 300px;
  width: 100%;
}
.img{
  width: 400px;
  height: 300px;
}
.block{
  background-size:100% 100%;
}
.el-tabs{
  width: 45%;
  float: left;
}
.el-descriptions{
   width: 45%;
  float: right;
}
.menu1,.menu2{
  color: #eeeeee;
  margin-right: 20px;
}
.el-button{
  background-color: #cb0e0e;
}
.el-tab-pane {
  height: calc(60vh - 110px);
  overflow-y: auto;
}
</style>
